<template>
    <div class="transcript-list">
      <el-card class="list-card">
        <template #header>
          <div class="card-header">
            <h3>视频文本 ({{ transcripts.length }})</h3>
            <div class="header-actions">
              <el-checkbox 
                v-model="selectAll" 
                @change="handleSelectAllChange"
                :disabled="transcripts.length === 0 || loading"
                :indeterminate="isIndeterminate"
              >
                全选
              </el-checkbox>
              <el-button 
                type="primary" 
                size="small" 
                :disabled="selectedTranscripts.length === 0 || loading"
                @click="$emit('generate')"
                :loading="loading"
              >
                生成文案
              </el-button>
            </div>
          </div>
        </template>
  
        <div v-if="transcripts.length === 0" class="empty-state">
          <el-empty description="暂无文本数据，请先处理视频文件夹" />
        </div>
  
        <div v-else class="list-content">
          <el-scrollbar height="400px">
            <div 
              v-for="(transcript, index) in transcripts" 
              :key="transcript.id || index"
              class="transcript-item"
            >
              <div class="item-header">
                <el-checkbox 
                  v-model="transcript.selected" 
                  @change="handleItemSelectChange"
                  :disabled="loading"
                />
                <div class="video-name">{{ transcript.video_name }}</div>
              </div>
  
              <div class="transcript-content">
                <el-input
                  v-model="transcript.content"
                  type="textarea"
                  :rows="3"
                  placeholder="视频转录文本..."
                  :disabled="loading"
                />
              </div>
            </div>
          </el-scrollbar>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  import { defineComponent, ref, computed, watch } from 'vue';
  
  export default defineComponent({
    name: 'TranscriptList',
    props: {
      transcripts: {
        type: Array,
        default: () => []
      },
      loading: {
        type: Boolean,
        default: false
      }
    },
    emits: ['generate', 'update:transcripts'],
    setup(props, { emit }) {
      const selectAll = ref(false);
      
      // 计算已选中的文本
      const selectedTranscripts = computed(() => {
        return props.transcripts.filter(t => t.selected);
      });
      
      // 计算部分选中状态
      const isIndeterminate = computed(() => {
        const selectedCount = selectedTranscripts.value.length;
        return selectedCount > 0 && selectedCount < props.transcripts.length;
      });
      
      // 处理全选/取消全选
      const handleSelectAllChange = (value) => {
        const updatedTranscripts = props.transcripts.map(t => ({
          ...t,
          selected: value
        }));
        emit('update:transcripts', updatedTranscripts);
      };
      
      // 处理单项选择变更
      const handleItemSelectChange = () => {
        // 检查是否全部选中或取消全选状态
        const allSelected = props.transcripts.every(t => t.selected);
        const someSelected = props.transcripts.some(t => t.selected);
        
        selectAll.value = allSelected;
        
        // 通知父组件更新数据
        emit('update:transcripts', [...props.transcripts]);
      };
      
      // 监听transcripts变化，重置selectAll状态
      watch(() => props.transcripts.length, () => {
        selectAll.value = props.transcripts.length > 0 && props.transcripts.every(t => t.selected);
      });
      
      return {
        selectAll,
        selectedTranscripts,
        isIndeterminate,
        handleSelectAllChange,
        handleItemSelectChange
      };
    }
  });
  </script>
  
  <style scoped>
  .transcript-list {
    margin-bottom: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .card-header h3 {
    margin: 0;
  }
  
  .header-actions {
    display: flex;
    gap: 15px;
    align-items: center;
  }
  
  .empty-state {
    padding: 30px 0;
  }
  
  .list-content {
    padding: 10px 0;
  }
  
  .transcript-item {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ebeef5;
  }
  
  .transcript-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }
  
  .item-header {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .video-name {
    font-weight: 500;
    color: #303133;
  }
  
  .transcript-content {
    padding-left: 25px;
  }
  </style>